"To Do List"
Bootstrap 3.3.0 Snippet by The Insomniac

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-4"></div> <div class="col-md-4"> <h2>To Do List</h2> <form name="checkListForm"> <input type="text" name="checkListItem" placeholder="Add Item..."/> </form> <button type="button" id="add" class="btn btn-info">Add</button> <button type="button" id="clear" title="Clear checked items" class="btn btn-default">clear</button> <br/><br/> <div class="list"></div> </div> <div class="col-md-4"></div> </div> </div>
h2 { font-family:arial; } form { display: inline-block; } .list { font-family:"Trebuchet MS"; font-size:20px; color:#000000; cursor:pointer; }
$(document).ready(function(){ //Hide clear btn on page load $('#clear').hide(); //Add text input to list on button press $('#add').click(function(){ //var toAdd gets the value of the input field var toAdd = $("input[name=checkListItem]").val(); //Append list item in its own div with a class of item into the list div //It also changes the cursor on hover of the appended item $('.list').append('<div class="item">' + toAdd + '</div>'); //fade in clear button when the add button is clicked $('#clear').fadeIn('fast'); //Clear input field when add button is pressed $('input').val(''); }); //Checks off items as they are pressed $(document).on('click', '.item', function() { //Chamge list item to red $(this).css("color", "#cc0000"); //Change cursor for checked item $(this).css("cursor","default"); //Strike through clicked item while giving it a class of done so it will be affected by the clear $(this).wrapInner('<strike class="done"></strike>'); //Add the X glyphicon $(this).append(" " + '<span class="glyphicon glyphicon-remove done" aria-hidden="true"></span>'); //Stops checked off items from being clicked again $(this).prop('disabled', true); }); //Removes list items with the class done $('#clear').click(function(){ $('.done').remove('.done'); }); });

Related: See More


Questions / Comments: